<template>
  <div class="Bar-PileBar" ref="chart"></div>
</template>

<script>
import barOptions from "@/MCharts/components/bar/options";
import { px2 } from "@/MCharts/style/Style";
export default {
  name: "MChartsBar",
  data() {
    return {};
  },
  props: {
    data: {},
    options: {},
    type: String,
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 400,
    },
  },
  watch: {
    data: {
      handler: function (e) {
        this.init();
      },
      deep: true,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    px2,
    init() {
      let chartDom = this.$refs.chart;
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(chartDom);

      // 指定图表的配置项和数据
      var option = barOptions.getOptions(this.data, this.options, "PileBar");

      // 使用刚指定的配置项和数据显示图表。
      myChart.clear();
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MCharts/style/var.scss";
.Bar-PileBar {
  height: 100%;
  width: 100%;
}
</style>
